<template>
    <!-- html -->
    <div class="CustomeRef">
        <h2>CustomeRef</h2>
        <h4>{{ msg }}</h4>
        <input type="text" v-model="msg" />
    </div>
</template>
<script lang="ts" setup name="CustomeRef">
// import { ref, customRef } from 'vue'
import useMsgRef from '@/hooks/useMsgRef'

//CustomeRef 创建一个自定义的Ref
//使用vue提供的默认ref定义响应式数据，数据一变，页面就更新
// let msg = ref('你好')

//使用vue提供的customRef定义响应式数据
// let initValue = '你好'
// let timer: number
// let msg = customRef((track, trigger) => {
//     return {
//         //get何时调用， msg被读取时
//         get() {
//             track() //告诉Vue数据msg很重要，你要对msg进行持续关注，一旦msg变化就去更新
//             return initValue
//         },
//         //set何时调用？ msg被修改时
//         set(value) {
//             clearTimeout(timer)
//             timer = setTimeout(() => {
//                 // console.log('set', value)
//                 initValue = value
//                 trigger() //通知Vue一下，数据msg变化了
//             }, 1000)
//         }
//     }
// })


//使用useMsgRef来定义一个响应式数据且有延迟效果
let { msg } = useMsgRef('你好', 1000)


</script>

<style scoped>
/* 样式 */
.CustomeRef {
    background-color: #ddd;
    border-radius: 10px;
    padding: 20px;
}
</style>